<template>
	<view class="container">
		<view class="row-a1">
			<view class="form">
				<u-form labelPosition="top" labelWidth="200" :model="form" :rules="rules" ref="uForm"
					:borderBottom="false">
					<u-form-item label="课程标题" prop="className">
						<u-input placeholder="请输入标题" v-model="form.className"></u-input>
					</u-form-item>
					<u-form-item label="课程日期" prop="classDate">
						<view class="item">
							<u-input placeholder="请选择课程日期" readonly v-model="form.classDate"></u-input>
							<view class="click" @click="shadow(0)">
							</view>
						</view>
					</u-form-item>
					<u-form-item label="课程时间" prop="classTime">
						<view class="con">
							<view class="item2">
								<u-input placeholder="请选择开始时间" v-model="form.classTime[0]" readonly></u-input>
								<view class="click" @click="shadow(1)">

								</view>
							</view>
							<view class="item2">
								<u-input placeholder="请选择结束时间" v-model="form.classTime[1]" readonly></u-input>
								<view class="click" @click="shadow(2)">

								</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="课程分类" prop="classType">
						<uni-data-select :multiple="true" :clear="true" @close="selectClose" :localdata="typeList"
							v-model="form.classType" placeholder="请选择课程分类"></uni-data-select>
					</u-form-item>
					<u-form-item label="课程金额" prop="price">
						<u-input placeholder="请输入金额" type="number" v-model="form.price"></u-input>
					</u-form-item>
					<u-form-item label="课程人数" prop="orderNum">
						<u-input placeholder="请输入人数" type="number" v-model="form.orderNum"></u-input>
					</u-form-item>
					<u-form-item label="课程级别" prop="level">
						<u-input placeholder="请选择课程级别" v-model="form.level" @focus="shadow(4)"></u-input>
					</u-form-item>
					<u-form-item label="教学方式" prop="method">
						<u-input placeholder="请选择教学方式" v-model="form.method" @focus="shadow(3)"></u-input>
					</u-form-item>
					<u-form-item label="课程链接/备注" prop="remark">
						<u-textarea v-model="form.remark" placeholder="请输入内容"></u-textarea>
					</u-form-item>
					<u-button @click="submit" type="primary">提交</u-button>
				</u-form>
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="date" mode="date" @confirm="confirm"
			@cancel="cancel"></u-datetime-picker>
		<u-datetime-picker :show="show1" v-model="time" mode="time" @confirm="confirm2"
			@cancel="cancel"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
		<u-picker :show="show2" :columns="columns" @confirm="confirm3" @cancel="cancel"></u-picker>
		<u-picker :show="show3" :columns="columns2" @confirm="confirm4" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	import {
		classTypeListAll
	} from "@/api/class/classType.js"
	import {
		classAdd
	} from "@/api/class/class.js"
	import {
		isMoreThanAnHourLater
	} from "@/util/index.js";
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				title: "创建课程",
				show: false,
				show1: false,
				show2: false,
				show3: false,
				form: {
					className: "",
					classDate: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
					classTime: [],
					price: null,
					orderNum: 1,
					method: null,
					level: null,
					remark: "",
					classType: []
				},
				rules: {
					'className': {
						type: 'string',
						required: true,
						message: '请填写课程标题',
						trigger: ['blur', 'change']
					},
					'classDate': {
						type: 'string',
						required: true,
						message: '请选择课程日期',
						trigger: ['blur', 'change']
					},
					'classTime': {
						type: 'array',
						required: true,
						message: '请选择课程时间',
						trigger: ['blur', 'change']
					},
					'classType': {
						type: 'array',
						required: true,
						message: '请选择课程分类',
						trigger: ['change']
					},
					'price': {
						type: 'number',
						required: true,
						message: '请填写课程金额',
						trigger: ['blur', 'change']
					},
					'orderNum': {
						type: 'number',
						required: true,
						message: '请填写课程人数',
						trigger: ['blur', 'change']
					},
					'method': {
						type: 'string',
						required: true,
						message: '请选择课程方式',
						trigger: ['change']
					},
					'level': {
						type: 'string',
						required: true,
						message: '请选择课程级别',
						trigger: ['change']
					},
				},
				date: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				time: uni.$u.timeFormat(new Date(), 'hh:MM'),
				timeType: 0,
				columns: [
					["腾讯会议", "钉钉", "飞书", "其他平台"]
				],
				columns2: [
					["入门级", "初级", "初中级", "中级", "中高级", "高级", "专业级"]
				],
				typeList: []
			};
		},
		computed: {
			...mapState(['$userInfo'])
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			shadow(type) {
				switch (type) {
					case 0:
						this.show = true;
						break;
					case 1:
						this.timeType = 0;
						this.show1 = true;
						break;
					case 2:
						this.timeType = 1;
						this.show1 = true;
						break;
					case 3:
						this.show2 = true;
						break;
					case 4:
						this.show3 = true;
						break;
					default:
						this.$refs.uToast.show({
							type: "default",
							message: "操作无效",
						});
						break;
				}

			},
			confirm(val) {
				this.form.classDate = uni.$u.timeFormat(val.value, 'yyyy-mm-dd');
				this.cancel();
			},
			confirm2(val) {
				if (this.timeType == 0) {
					if (this.form.classTime[1] != null) {
						if (val.value > this.form.classTime[1]) {
							this.$refs.uToast.show({
								type: "default",
								message: "开始时间不能大于结束时间",
							});
							return false;
						}
					}
					this.form.classTime[0] = val.value;
				} else {
					if (this.form.classTime[0] != null) {
						if (this.form.classTime[0] > val.value) {
							this.$refs.uToast.show({
								type: "default",
								message: "结束时间不能小于开始时间",
							});
							return false;
						}
					}
					this.form.classTime[1] = val.value;
				}
				this.cancel();
			},
			confirm3(val) {
				this.form.method = val.value[0];
				this.cancel();
			},
			confirm4(val) {
				this.form.level = val.value[0];
				this.cancel();
			},
			cancel() {
				this.show = false;
				this.show1 = false;
				this.show2 = false;
				this.show3 = false;
			},
			submit() {
				let that = this;
				this.$refs.uForm.validate().then(res => {
					let dateTime = this.form.classDate + " " + this.form.classTime[0] + ":00"
					if (!isMoreThanAnHourLater(dateTime)) {
						that.$refs.uToast.show({
							type: "default",
							message: "日期时间不合理",
						});
						return;
					}
					let param = {
						...that.form,
						teacherId: that.$userInfo._id,
					}
					classAdd(param).then(res => {
						if (res.code == 200) {
							that.$refs.uToast.show({
								type: "success",
								message: res.msg,
							});
							setTimeout(() => {
								uni.$u.route({
									type: "back"
								})
							}, 1000)
						}
					});
				});
			},
			selectClose() {
				let arr = this.form.classType;
				if (arr.length > 5) {
					arr.splice(0, arr.length, ...arr.slice(0, 5));
					this.$refs.uToast.show({
						type: "default",
						message: "不建议超过五个",
					});
				};
				this.form.classType = arr;
			},
			getOptions() {
				classTypeListAll().then(res => {
					this.typeList = res.data.records.map(it => {
						it.text = it.classTypeName;
						it.value = it.classTypeName;
						return it;
					});
				})
			}
		},
		onLoad(options) {
			if (options.id) {
				this.title = "编辑课程";
				uni.setNavigationBarTitle({
					title: '编辑课程'
				});
			}
			this.getOptions();
		}
	};
</script>

<style lang="scss">
	.container {
		.row-a1 {
			background-color: #fff;
			padding: 10px;

			.form {
				.item {
					width: 100%;
					position: relative;

					.click {
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 999;
						position: absolute;
					}
				}

				.con {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.item2 {
						width: 50%;
						position: relative;
						text-align: right;

						.click {
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							z-index: 999;
							position: absolute;
						}
					}
				}
			}
		}
	}
</style>